<!-- 新用户奖励弹窗 -->
<!-- XXX 已弃用，考虑删除 -->
<template>
  <with-mask :is-show="popupType === 'new-user'">
    <div class="container">
      <!-- 边框装饰 -->
      <div class=" border-decorate">
        <!-- 背光 -->
        <image
          class="light"
          src="https://ustatic.hudongmiao.com/joymew-host-contest/lottery-new-user-light.png"
        />
        <!-- 星星 -->
        <image
          class="start"
          src="https://ustatic.hudongmiao.com/joymew-host-contest/lottery-new-user-start.png"
          alt=""
        />
        <!-- 礼物盒 -->
        <image
          class="gift-box"
          src="https://ustatic.hudongmiao.com/joymew-host-contest/lottery-new-user-gift-box.png"
          alt=""
        />
      </div>
      <!-- 恭喜信息 -->
      <div class="congratulation-info">
        <!-- 标题 -->
        <div class="title">
          <text class="title-text">
            恭喜你
          </text>
          <image
            class="title-img"
            src="https://ustatic.hudongmiao.com/joymew-host-contest/lottery-prize-list-title-bg.png"
            alt=""
          />
        </div>
        <!-- 说明 -->
        <div class="statement">
          <div class="statement-text">
            {{ taskStatus.firstLoginMiaodouInfo.inviterName }}
            送你{{ taskStatus.firstLoginMiaodouInfo.availableFirstLoginMiaodou }}喵豆
          </div>
          <div class="statement-text">
            喵豆可用于奖池抽奖
          </div>
        </div>
        <!-- 喵豆图片 -->
        <image
          class="miaodou-img"
          src="https://ustatic.hudongmiao.com/joymew-host-contest/lottery-new-user-miaodou.png"
        />
        <!-- 喵豆数量 -->
        <div class="miaodou-num">
          {{ taskStatus.firstLoginMiaodouInfo.availableFirstLoginMiaodou }}喵豆
        </div>
        <!-- 领取按钮 -->
        <div
          class="get-btn"
          @click="getLoginPrize"
        >
          领取
        </div>
      </div>
    </div>
  </with-mask>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { useUser } from '@/stores/user';
import { requestSubscribeMessage } from '@/utils/tools';
import { useLottery } from '../../stores/lottery';

const user = useUser();
const lottery = useLottery();

const { taskStatus, miaodouStatus } = storeToRefs(user);
const { getLoginMiaodou, getInfo } = user;
const { popupType } = storeToRefs(lottery);
const { changePopupType } = lottery;

/**
 * 领取登录奖励
 * @returns void
 * @description 领取登录奖励，领取成功后关闭弹窗，领取失败弹出提示
 */
const getLoginPrize = async () => {
  // 请求订阅消息
  requestSubscribeMessage();

  const result = await getLoginMiaodou();
  if (result) {
    changePopupType('no');
    getInfo();

    // 检查是否有可领取的喵豆
    if (miaodouStatus?.availableReceiveMiaodou ?? 0 > 0) {
      // 有的话跳转到抽奖页面，并且弹出喵豆弹窗
      setTimeout(() => {
        uni.switchTab({ url: '/pages/lottery/lottery' });
        changePopupType('miaodou');
      }, 500);
    }
  } else {
    uni.showToast({
      title: '领取失败，请检查网络后重试',
      icon: 'none',
    });
  }
};

</script>

<style lang="scss" scoped>
.container {
  position: relative;

  display: grid;
  grid-template:
    "congratulationInfo" 1fr
    "." 48px;
  row-gap: 20px;
  justify-items: center;

  // 边框装饰
  .border-decorate {
    position: absolute;
    top: -38.7179vw;
    left: 50%;
    z-index: -1;

    width: 62.5641vw;
    height: 62.5641vw;

    transform: translateX(-50%);

    // 背光
    .light {
      position: absolute;
      top: 0;
      left: 0;

      width: 100%;
      height: 100%;
    }

    .start {
      position: absolute;
      top: 50%;
      left: 50%;

      width: 43.5897vw;
      height: 32.5641vw;

      transform: translate(-50%, -50%);
    }

    // 礼物
    .gift-box {
      position: absolute;
      top: 50%;
      left: 50%;

      width: 34.8718vw;
      height: 34.1026vw;

      transform: translate(-50%, -50%);
    }
  }

  .congratulation-info {
    grid-area: congratulationInfo;

    width: calc(73.8462vw - 24px);

    background: linear-gradient(180deg, #faf1e2, #f5e0c9 100%);
    border: 1px solid #fff;
    border-radius: 16px;

    display: grid;

    // XXX 需要改成一列，但现在时间太紧，就暂时这样
    grid-template:
      "title title" 8.9744vw
      ". ." 25px
      "statement statement" 56px
      ". ." 16px
      "miaodouImg miaodouImg" 128px
      "miaodouNum miaodouNum" 34px
      ". ." 19px
      "getBtn getBtn" auto
      ". ." 24px
      / 1fr 1fr;
    justify-items: center;

    // 标题
    .title {
      grid-area: title;
      align-self: self-start;

      position: relative;
      z-index: 1;

      width: 43.3333vw;
      height: 8.9744vw;

      text-align: center;

      // 标题文字
      .title-text {
        font-size: 5.1282vw;
        font-weight: 500;
        line-height: 8.9744vw;
        color: #fff;
      }

      // 标题背景
      .title-img {
        position: absolute;
        top: 0;
        left: 50%;
        z-index: -1;

        width: 100%;
        height: 100%;

        transform: translateX(-50%);
      }
    }

    // 说明
    .statement {
      grid-area: statement;

      width: 50.2564vw;
      height: 14.359vw;

      font-size: 5.1282vw;
      line-height: 6.5vw;
      color: #743920;
      text-align: center;
    }

    // 喵豆图片
    .miaodou-img {
      grid-area: miaodouImg;

      width: 32.0513vw;
      height: 32.8205vw;
    }

    // 喵豆数量
    .miaodou-num {
      grid-area: miaodouNum;

      height: 34px;

      font-size: 24px;
      font-weight: 500;
      line-height: 34px;
      color: #ec5f72;
      text-align: center;
    }

    // 领取按钮
    .get-btn {
      grid-area: getBtn;

      width: 53.3333vw;
      height: 12.3077vw;

      background: linear-gradient(103deg,
      #ff825e 0%,
      #ff6c87 100%,
      #f24ebd 100%);
      border-radius: 11.7949vw;

      font-size: 4.359vw;
      line-height: 12.3077vw;
      color: #fff;
      text-align: center;
    }
  }
}
</style>
